import React from "react";
import {Component} from "react";
import "./listCss.css"
export default class List extends Component {

    componentDidMount() {
        console.log("componentDidMount中的props=",this.props)
        this.setState({propState:{...this.props}})

        console.log("componentDidMount中的state=",this.state)


    }

    componentWillReceiveProps(nexProps) {
        console.log("componentWillReceiveProps中nexProps=",nexProps)
        this.setState({propState:{...nexProps}})
        console.log("componentWillReceiveProps中修改后的state=",this.state)

    }

    /*
    * props = {
    *       title_item:[]    传入各标题名字
    * 
    *   }
    * */

    //切换页数的回调函数
    changePage = (pageObj)=>{
        console.log("pageObj = ",pageObj)
        console.log("props = ",this.props)

        //上一页
        if (pageObj === -1){
            console.log("进入了pageObj === -1 的判断")
            // this.setprops({pages:{...oldPages,page: this.props.pages.prePage}})
            this.pageRequest(this.props.pages.prePage)

            console.log("修改后的pages ",this.props.pages)

            //下一页
        }else if(pageObj === -3) {
            console.log("进入了pageObj === -3 的判断")

            // this.setprops({pages: {...oldPages,page: this.props.pages.nextPage }})
            this.pageRequest(this.props.pages.nextPage)

            console.log("修改后的pages ",this.props.pages)

        }else {
            console.log("进入了pageObj else 的判断")

            // this.setprops({pages: {...oldPages,page: pageObj}})
            this.pageRequest(pageObj)

            console.log("修改后的pages ",this.props.pages)


        }
        console.log("pageObj = ",pageObj)
        // console.log("navigatePage",this.props.navigatePage)
    }

    render(){
        return(

            <div className="List_box">
                <div className="List_title">
                    {
                        this.props.title_item.map(
                            (titleObj,index) => {
                                return <span className="List_title_item" key = {index} >{titleObj}</span>
                            }
                        )
                    }

                </div>

                <div className="List_pages_box">
                    <div className="pages_parent">
                        <nav aria-label="Page navigation ">
                            <ul className="pagination pagination-lg">
                                <li>
                                    <a href="#" aria-label="Previous" onClick={()=>{this.changePage(-1)}} style={{pointerEvents:this.props.isFirstPage? "none" :"auto"}}>
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                                <li><a href="#" onClick={()=>{this.changePage(this.props.navigatePage[0])}} style={{pointerEvents:this.props.isFirstPage? "none" :"auto"}}>    {this.props.navigatePage[0]}</a></li>
                                <li><a href="#" onClick={()=>{this.changePage(this.props.navigatePage[1])}} >    {this.props.navigatePage[1]}</a></li>
                                <li><a href="#" onClick={()=>{this.changePage(this.props.navigatePage[2])}} >    {this.props.navigatePage[2]}</a></li>
                                <li><a href="#" onClick={()=>{this.changePage(this.props.navigatePage[3])}} >    {this.props.navigatePage[3]}</a></li>
                                <li><a href="#" onClick={()=>{this.changePage(this.props.navigatePage[4])}} style={{pointerEvents:this.props.isLastPage? "none" :"auto"}}>    {this.props.navigatePage[4]}</a></li>
                                <li>
                                    <a href="#" aria-label="Next" onClick={()=>{this.changePage(-3)}} style={{pointerEvents:this.props.isLastPage? "none" :"auto"}}>
                                        <span aria-hidden="true" >&raquo;</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        )
    }
}
// return(
//     <div className="List_box">
//         <div className="List_title">
//             <span className="List_title_item">产品名称</span>
//             <span className="List_title_item">测试</span>
//             <span className="List_title_item">测试</span>
//             <span className="List_title_item">测试</span>
//             <span className="List_title_item">测试</span>
//         </div>
//         <div>
//
//         </div>
//
//         <div className="List_pages_box">
//             <div className="pages_parent">
//                 <nav aria-label="Page navigation ">
//                     <ul className="pagination pagination-lg">
//                         <li>
//                             <a href="#" aria-label="Previous" >
//                                 <span aria-hidden="true">&laquo;</span>
//                             </a>
//                         </li>
//                         <li>    <a href="#">  1  </a>   </li>
//                         <li>    <a href="#">  2  </a>   </li>
//                         <li>    <a href="#">  3  </a>   </li>
//                         <li>    <a href="#">  4  </a>   </li>
//                         <li>    <a href="#">  5  </a>   </li>
//                         <li>
//                             <a href="#" aria-label="Next">
//                                 <span aria-hidden="true" >&raquo;</span>
//                             </a>
//                         </li>
//                     </ul>
//                 </nav>
//             </div>
//         </div>
//
//     </div>
// )